<!--<template>-->
<!--  <div ref="artRef"></div>-->
<!--</template>-->

<!--<script>-->
<!--import Artplayer from "artplayer";-->
<!--import Hls from 'hls.js'; // 使用import导入hls.js-->
<!--function playM3u8(video, url, art) {-->
<!--  if (Hls.isSupported()) {-->
<!--    if (art.hls) art.hls.destroy();-->
<!--    const hls = new Hls();-->
<!--    hls.loadSource(url);-->
<!--    hls.attachMedia(video);-->
<!--    art.hls = hls;-->
<!--    art.on('destroy', () => hls.destroy());-->
<!--  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {-->
<!--    video.src = url;-->
<!--  } else {-->
<!--    art.notice.show = 'Unsupported playback format: m3u8';-->
<!--  }-->
<!--}-->
<!--export default {-->
<!--  props: {-->
<!--    option: {-->
<!--      type: Object,-->
<!--      required: true,-->
<!--    },-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      instance: null,-->
<!--    };-->
<!--  },-->
<!--  watch: {-->
<!--    option: {-->
<!--      handler(newVal) {-->
<!--        this.instance = new Artplayer({-->
<!--          ...newVal,-->
<!--          customType: {-->
<!--            m3u8: playM3u8,-->
<!--          },-->
<!--          container: this.$refs.artRef,-->
<!--          setting: true,-->
<!--          plugins: [],-->
<!--        });-->
<!--        this.$nextTick(() => {-->
<!--          this.$emit("get-instance", this.instance);-->
<!--        });-->
<!--      },-->
<!--      deep: true,-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    console.log('object :>> ', this.option);-->
<!--  },-->
<!--  beforeUnmount() {-->
<!--    if (this.instance && this.instance.destroy) {-->
<!--      this.instance.destroy(false);-->
<!--    }-->
<!--  },-->
<!--  methods: {}-->
<!--};-->
<!--</script>-->
